<script>
import index from '@/api/index.js'
export default {
  data(){
    return{
      searchContext:''
    }
  },
  methods:{
    toPath(path) {
      // console.log(item)
      //   防止重复跳转路由
      if (this.$route.path !==  path && !(this.$route.path === '/index' && ( path === '/'))) {
        this.$router.push(path)
      }
    },
    search(){
      this.toPath('/index')
    },
    userClick(){

      index.login().then((res)=>{
        if (res.data.code === 200){
          index.logout()
          this.$store.state.userName ='点击登录'
        }else {
          this.toPath('/login')
        }
      })


    }
  }
}
</script>
<template>
  <div class="nav">
    <div class="logo">
      <a @click.prevent="toPath('/index')"><img src="../assets/images/logo.png" alt="logo"></a>
    </div>
    <div class="nav-link">
      <ul>
        <li><a href="#" class="nav-link" @click.prevent="toPath('/index')">问答</a></li>
        <li><a href="#" class="nav-link">博客</a></li>
        <li><a href="#" class="nav-link">标签</a></li>
        <li><a href="#" class="nav-link">活动</a></li>
      </ul>
    </div>
    <div class="nav-search">
      <input type="text" id="search-input" name="search" v-model="this.$store.state.searchContext" autocomplete="off">
      <button type="button" id="search-button" @click="search">搜索</button>
    </div>
    <div class="login">
      <a href="#" @click.prevent="userClick" id="login-state">{{ this.$store.state.userName }}</a>
    </div>
  </div>
</template>

<style scoped>
.root-top {
  border-top: 3px solid #008050;
  /* background-color: #ededed; */
  box-shadow: 0px 1px 10px lightgrey;
}

.nav {
  margin: 0 auto;
  width: 1190px;
  height: 90px;
  /* background-color: rebeccapurple; */

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-wrap {
  display: none;
}

.logo img {
  width: 150px;
}


.nav-link li {
  display: inline;
  margin: 10px;
}

.nav-link a {
  font-size: 20px;
  font-weight: 500;
  color: dimgrey;
  transition: 0.2s;
}

.nav-link a:hover {
  font-weight: 900;
  color: dimgrey;
  border-bottom: 2px solid #00a000;

}

.nav-search {
  /* display: flex; */
  /* align-items: baseline; */
}

#search-bar {
  /* float: left; */

  /* list-style: none; */
}

#search-bar {
  background-color: darkred;
  padding: 0 10px;
}

#search-input {
  font-size: 20px;
  line-height: 40px;
  border: 1px solid #cecece;
  border-radius: 14px;
  width: 400px;

  /* margin: 0 10px; */
  padding: 0 10px;
  transition: 0.3s;
}

#search-input:focus {

  box-shadow: 0 0 5px 1px rgb(0, 150, 94);
}


#search-button,
#send-post-button {
  font-size: 20px;
  line-height: 40px;
  border-radius: 14px;
  border: none;
  background-color: rgb(0, 150, 94);
  color: white;
  font-weight: 700;
  width: 100px;
  cursor: pointer;

}

.login {
  text-align: center;
  width: 100px;
  flex-grow: 1;
}

.login a {
  font-size: 20px;
  color: #007500;
}
</style>